/* 获取元素 */
const fill = document.querySelector(".fill");
const empties = document.querySelectorAll(".empty");
/* 用户开始拖动 HTML 元素或选中的文本事件 */
fill.addEventListener("dragstart", dragStart);
/* 拖放操作结束。（松开鼠标按钮或按下 Esc 键）事件 */
fill.addEventListener("dragend", dragEnd);

for (const empty of empties) {
  /* 被拖动的元素或文本选区正在有效释放目标上被拖动（在此过程中持续触发，每 350ms 触发一次） */
  empty.addEventListener("dragover", dragOver);
  /* 被拖动的元素或文本选区移入有效释放目标区 */
  empty.addEventListener("dragenter", dragEnter);
  /* 用户开始拖动 HTML 元素或选中的文本事件 */
  empty.addEventListener("dragleave", dragLeave);
  /* 拖放操作结束。（松开鼠标按钮或按下 Esc 键）事件  */
  empty.addEventListener("drop", dragDrop);
}

function dragStart() {
  this.className += " hold";
  setTimeout(() => (this.className = "invisible"), 0);
}

function dragEnd() {
  this.className = "fill";
}
function dragOver(e) {
  /* 阻止默认事件 */
  e.preventDefault();
}
function dragEnter(e) {
  /* 阻止默认事件 */
  e.preventDefault();
  this.className += " hovered";
}
function dragLeave() {
  this.className = "empty";
}

function dragDrop() {
  this.className = "empty";
  /* 插入一个元素节点 */
  this.append(fill);
}
